<template>
  <div class="resume-builder">
    <el-card class="resume-card">
      <template #header>
        <div class="card-header">
          <h2>
            <el-icon><User /></el-icon>
            在线简历管理
          </h2>
          <div class="header-actions">
            <el-button type="primary" @click="saveResume" :loading="saving">
              <el-icon><Check /></el-icon>
              保存简历
            </el-button>
            <el-button @click="previewResume" v-if="hasResume">
              <el-icon><View /></el-icon>
              预览简历
            </el-button>
          </div>
        </div>
      </template>

      <el-form :model="resumeData" label-position="top" class="resume-form">
        <!-- 基本信息 -->
        <el-collapse v-model="activeCollapse" class="resume-sections">
          <el-collapse-item name="basic" title="基本信息">
            <div class="form-section">
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="头像选择">
                    <div class="avatar-section">
                      <el-avatar :size="80" :src="resumeData.avatar" class="current-avatar">
                        {{ resumeData.real_name?.charAt(0) }}
                      </el-avatar>
                      <div class="avatar-options">
                        <el-radio-group v-model="resumeData.avatar" class="avatar-radio-group">
                          <el-radio
                            v-for="avatar in defaultAvatars"
                            :key="avatar.url"
                            :label="avatar.url"
                            class="avatar-radio"
                          >
                            <img :src="avatar.url" :alt="avatar.name" class="avatar-option-img">
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                
                <el-col :span="8">
                  <el-form-item label="真实姓名" required>
                    <el-input v-model="resumeData.real_name" placeholder="请输入真实姓名" />
                  </el-form-item>
                  
                  <el-form-item label="学号">
                    <el-input v-model="resumeData.student_id" placeholder="请输入学号" />
                  </el-form-item>
                  
                  <el-form-item label="邮箱" required>
                    <el-input v-model="resumeData.email" placeholder="请输入邮箱" />
                  </el-form-item>
                </el-col>
                
                <el-col :span="8">
                  <el-form-item label="专业">
                    <el-select v-model="resumeData.major" placeholder="请选择专业">
                      <el-option
                        v-for="option in majorLabels"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="年级">
                    <el-select v-model="resumeData.grade" placeholder="请选择年级">
                      <el-option label="大一" value="大一" />
                      <el-option label="大二" value="大二" />
                      <el-option label="大三" value="大三" />
                      <el-option label="大四" value="大四" />
                      <el-option label="研一" value="研一" />
                      <el-option label="研二" value="研二" />
                      <el-option label="研三" value="研三" />
                      <el-option label="博士" value="博士" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="GPA">
                    <el-input-number
                      v-model="resumeData.gpa"
                      :min="0"
                      :max="4.0"
                      :precision="2"
                      placeholder="GPA"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item label="个人优势">
                <el-input
                  v-model="resumeData.personal_advantages"
                  type="textarea"
                  :rows="4"
                  placeholder="请简要描述您的个人优势和特长..."
                />
              </el-form-item>
            </div>
          </el-collapse-item>

          <!-- 教育经历 -->
          <el-collapse-item name="education" title="教育经历">
            <div class="form-section">
              <div class="section-header">
                <h3>教育经历</h3>
                <el-button type="primary" size="small" @click="addEducation">
                  <el-icon><Plus /></el-icon>
                  添加教育经历
                </el-button>
              </div>
              
              <div v-for="(edu, index) in resumeData.education_experience" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ edu.school || `教育经历 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeEducation(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="学校">
                        <el-input v-model="edu.school" placeholder="请输入学校名称" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="专业">
                        <el-input v-model="edu.major" placeholder="请输入专业" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-form-item label="学历">
                        <el-select v-model="edu.degree" placeholder="请选择学历">
                          <el-option
                            v-for="degree in degreeOptions"
                            :key="degree.value"
                            :label="degree.label"
                            :value="degree.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="开始时间">
                        <el-date-picker
                          v-model="edu.start_time"
                          type="date"
                          placeholder="开始时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="结束时间">
                        <el-date-picker
                          v-model="edu.end_time"
                          type="date"
                          placeholder="结束时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="GPA">
                        <el-input-number
                          v-model="edu.gpa"
                          :min="0"
                          :max="4.0"
                          :precision="2"
                          placeholder="GPA"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="描述">
                        <el-input v-model="edu.description" placeholder="简要描述" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </div>
          </el-collapse-item>

          <!-- 实习经历 -->
          <el-collapse-item name="internship" title="实习经历">
            <div class="form-section">
              <div class="section-header">
                <h3>实习经历</h3>
                <el-button type="primary" size="small" @click="addInternship">
                  <el-icon><Plus /></el-icon>
                  添加实习经历
                </el-button>
              </div>
              
              <div v-for="(internship, index) in resumeData.internship_experience" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ internship.company || `实习经历 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeInternship(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="公司">
                        <el-input v-model="internship.company" placeholder="请输入公司名称" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="职位">
                        <el-input v-model="internship.position" placeholder="请输入职位" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-form-item label="开始时间">
                        <el-date-picker
                          v-model="internship.start_time"
                          type="date"
                          placeholder="开始时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="结束时间">
                        <el-date-picker
                          v-model="internship.end_time"
                          type="date"
                          placeholder="结束时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="工作时长">
                        <el-input v-model="internship.duration" placeholder="工作时长" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item label="工作描述">
                    <el-input
                      v-model="internship.description"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述主要工作内容..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="主要成就">
                    <el-input
                      v-model="internship.achievement"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述主要的工作成就和收获..."
                    />
                  </el-form-item>
                </el-card>
              </div>
            </div>
          </el-collapse-item>

          <!-- 项目经历 -->
          <el-collapse-item name="project" title="项目经历">
            <div class="form-section">
              <div class="section-header">
                <h3>项目经历</h3>
                <el-button type="primary" size="small" @click="addProject">
                  <el-icon><Plus /></el-icon>
                  添加项目经历
                </el-button>
              </div>
              
              <div v-for="(project, index) in resumeData.project_experience" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ project.project_name || `项目经历 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeProject(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-form-item label="项目名称">
                    <el-input v-model="project.project_name" placeholder="请输入项目名称" />
                  </el-form-item>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="承担角色">
                        <el-input v-model="project.role" placeholder="如：开发工程师、项目经理等" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="使用技术">
                        <el-input v-model="project.technologies" placeholder="如：Java, Vue.js, MySQL等" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-form-item label="开始时间">
                        <el-date-picker
                          v-model="project.start_time"
                          type="date"
                          placeholder="开始时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="结束时间">
                        <el-date-picker
                          v-model="project.end_time"
                          type="date"
                          placeholder="结束时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目链接">
                        <el-input v-model="project.project_url" placeholder="项目链接或仓库地址" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item label="项目描述">
                    <el-input
                      v-model="project.description"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述项目的主要功能和架构..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="主要成果">
                    <el-input
                      v-model="project.achievement"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述项目的主要成果和技术收获..."
                    />
                  </el-form-item>
                </el-card>
              </div>
            </div>
          </el-collapse-item>

          <!-- 科研经历 -->
          <el-collapse-item name="research" title="科研经历">
            <div class="form-section">
              <div class="section-header">
                <h3>科研经历</h3>
                <el-button type="primary" size="small" @click="addResearch">
                  <el-icon><Plus /></el-icon>
                  添加科研经历
                </el-button>
              </div>
              
              <div v-for="(research, index) in resumeData.research_experience" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ research.research_title || `科研经历 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeResearch(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-form-item label="科研题目">
                    <el-input v-model="research.research_title" placeholder="请输入科研项目题目" />
                  </el-form-item>
                  
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-form-item label="项目类型">
                        <el-select v-model="research.project_type" placeholder="请选择项目类型">
                          <el-option label="国家级项目" value="national" />
                          <el-option label="省级项目" value="provincial" />
                          <el-option label="校级项目" value="university" />
                          <el-option label="导师项目" value="supervisor" />
                          <el-option label="自主研究" value="personal" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="指导老师">
                        <el-input v-model="research.supervisor" placeholder="请输入指导老师" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="研究方向">
                        <el-input v-model="research.research_field" placeholder="研究方向" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="开始时间">
                        <el-date-picker
                          v-model="research.start_time"
                          type="date"
                          placeholder="开始时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="结束时间">
                        <el-date-picker
                          v-model="research.end_time"
                          type="date"
                          placeholder="结束时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item label="研究描述">
                    <el-input
                      v-model="research.description"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述研究的主要内容和目标..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="研究成果">
                    <el-input
                      v-model="research.achievement"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述取得的研究成果..."
                    />
                  </el-form-item>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="发表论文">
                        <el-input
                          v-model="research.publications"
                          type="textarea"
                          :rows="2"
                          placeholder="发表的论文或期刊..."
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="项目资助">
                        <el-input v-model="research.research_funding" placeholder="项目资金支持来源" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </div>
          </el-collapse-item>

          <!-- 竞赛经历 -->
          <el-collapse-item name="competition" title="竞赛经历">
            <div class="form-section">
              <div class="section-header">
                <h3>竞赛经历</h3>
                <el-button type="primary" size="small" @click="addCompetition">
                  <el-icon><Plus /></el-icon>
                  添加竞赛经历
                </el-button>
              </div>
              
              <div v-for="(competition, index) in resumeData.competition_experience" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ competition.competition_name || `竞赛经历 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeCompetition(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="竞赛名称">
                        <el-input v-model="competition.competition_name" placeholder="请输入竞赛名称" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="举办单位">
                        <el-input v-model="competition.organization" placeholder="请输入举办单位" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-form-item label="竞赛时间">
                        <el-date-picker
                          v-model="competition.competition_time"
                          type="date"
                          placeholder="竞赛时间"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="获奖等级">
                        <el-input v-model="competition.award" placeholder="如：一等奖、二等奖等" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="名次">
                        <el-input v-model="competition.ranking" placeholder="如：第1名、前10%等" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item label="竞赛描述">
                    <el-input
                      v-model="competition.description"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述竞赛的主要内容和规则..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="主要成就">
                    <el-input
                      v-model="competition.achievement"
                      type="textarea"
                      :rows="2"
                      placeholder="请描述在竞赛中获得的主要成就..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="证书链接">
                    <el-input v-model="competition.certificate" placeholder="获奖证书的链接地址" />
                  </el-form-item>
                </el-card>
              </div>
            </div>
          </el-collapse-item>

          <!-- 自定义字段 -->
          <el-collapse-item name="custom" title="自定义字段">
            <div class="form-section">
              <div class="section-header">
                <h3>自定义字段</h3>
                <el-button type="primary" size="small" @click="addCustomSection">
                  <el-icon><Plus /></el-icon>
                  添加自定义字段
                </el-button>
              </div>
              
              <div v-for="(section, index) in resumeData.custom_sections" :key="index" class="experience-item">
                <el-card shadow="hover" class="experience-card">
                  <template #header>
                    <div class="experience-header">
                      <span>{{ section.title || `自定义字段 ${index + 1}` }}</span>
                      <el-button type="danger" size="small" text @click="removeCustomSection(index)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </template>
                  
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-form-item label="字段类型">
                        <el-input v-model="section.section_type" placeholder="如：技能证书、兴趣爱好等" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="标题">
                        <el-input v-model="section.title" placeholder="请输入字段标题" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  
                  <el-form-item label="内容">
                    <el-input
                      v-model="section.content"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入详细内容..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="排序">
                    <el-input-number
                      v-model="section.sort_order"
                      :min="0"
                      placeholder="排序数字"
                    />
                  </el-form-item>
                </el-card>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button size="large" @click="resetResume">重置</el-button>
          <el-button type="primary" size="large" @click="saveResume" :loading="saving">
            <el-icon><Check /></el-icon>
            保存简历
          </el-button>
          <el-button type="success" size="large" @click="previewResume" v-if="hasResume">
            <el-icon><View /></el-icon>
            预览简历
          </el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 简历预览对话框 -->
    <el-dialog v-model="previewVisible" title="简历预览" width="800px">
      <ResumePreview :resume="resumeData" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  User, Check, View, Plus, Delete 
} from '@element-plus/icons-vue'
import { 
  Resume, 
  ResumeEducation, 
  ResumeInternship, 
  ResumeProject, 
  ResumeResearch, 
  ResumeCompetition, 
  ResumeCustomSection,
  defaultAvatars, 
  degreeOptions, 
  majorLabels,
  getResumeAPI,
  createOrUpdateResumeAPI
} from '@/api/resume'
import ResumePreview from './ResumePreview.vue'

// 响应式数据
const activeCollapse = ref(['basic'])
const saving = ref(false)
const previewVisible = ref(false)
const hasResume = computed(() => resumeData.value.id !== undefined)

// 简历数据
const resumeData = ref<Resume>({
  user_id: 0,
  avatar: defaultAvatars[0].url,
  real_name: '',
  student_id: '',
  major: '',
  grade: '',
  degree: '',
  gpa: 0,
  phone: '',
  email: '',
  personal_advantages: '',
  education_experience: [],
  internship_experience: [],
  project_experience: [],
  research_experience: [],
  competition_experience: [],
  custom_sections: []
})

// 添加教育经历
const addEducation = () => {
  resumeData.value.education_experience?.push({
    school: '',
    major: '',
    degree: '',
    start_time: '',
    end_time: '',
    gpa: 0,
    description: ''
  })
}

// 删除教育经历
const removeEducation = (index: number) => {
  resumeData.value.education_experience?.splice(index, 1)
}

// 添加实习经历
const addInternship = () => {
  resumeData.value.internship_experience?.push({
    company: '',
    position: '',
    start_time: '',
    end_time: '',
    duration: '',
    description: '',
    achievement: ''
  })
}

// 删除实习经历
const removeInternship = (index: number) => {
  resumeData.value.internship_experience?.splice(index, 1)
}

// 添加项目经历
const addProject = () => {
  resumeData.value.project_experience?.push({
    project_name: '',
    role: '',
    start_time: '',
    end_time: '',
    technologies: '',
    description: '',
    achievement: '',
    project_url: ''
  })
}

// 删除项目经历
const removeProject = (index: number) => {
  resumeData.value.project_experience?.splice(index, 1)
}

// 添加科研经历
const addResearch = () => {
  resumeData.value.research_experience?.push({
    research_title: '',
    project_type: '',
    supervisor: '',
    start_time: '',
    end_time: '',
    research_field: '',
    description: '',
    achievement: '',
    publications: '',
    research_funding: ''
  })
}

// 删除科研经历
const removeResearch = (index: number) => {
  resumeData.value.research_experience?.splice(index, 1)
}

// 添加竞赛经历
const addCompetition = () => {
  resumeData.value.competition_experience?.push({
    competition_name: '',
    organization: '',
    competition_time: '',
    award: '',
    ranking: '',
    description: '',
    achievement: '',
    certificate: ''
  })
}

// 删除竞赛经历
const removeCompetition = (index: number) => {
  resumeData.value.competition_experience?.splice(index, 1)
}

// 添加自定义字段
const addCustomSection = () => {
  resumeData.value.custom_sections?.push({
    section_type: '',
    title: '',
    content: '',
    sort_order: 0
  })
}

// 删除自定义字段
const removeCustomSection = (index: number) => {
  resumeData.value.custom_sections?.splice(index, 1)
}

// 保存简历
const saveResume = async () => {
  if (!resumeData.value.real_name || !resumeData.value.email) {
    ElMessage.error('请填写姓名和邮箱等基本信息')
    return
  }

  try {
    saving.value = true
    const response = await createOrUpdateResumeAPI(resumeData.value)
    console.log('保存简历响应:', response)
    resumeData.value = response.data || resumeData.value
    
    ElMessage.success('简历保存成功')
  } catch (error) {
    ElMessage.error('保存简历失败')
    console.error('保存简历错误:', error)
  } finally {
    saving.value = false
  }
}

// 预览简历
const previewResume = () => {
  previewVisible.value = true
}

// 重置简历
const resetResume = () => {
  resumeData.value = {
    user_id: 0,
    avatar: defaultAvatars[0].url,
    real_name: '',
    student_id: '',
    major: '',
    grade: '',
    degree: '',
    gpa: 0,
    phone: '',
    email: '',
    personal_advantages: '',
    education_experience: [],
    internship_experience: [],
    project_experience: [],
    research_experience: [],
    competition_experience: [],
    custom_sections: []
  }
  activeCollapse.value = ['basic']
  ElMessage.info('简历已重置')
}

// 加载简历数据
const loadResume = async () => {
  try {
    const response = await getResumeAPI()
    console.log('简历API响应:', response)
    resumeData.value = response.data || {}
  } catch (error) {
    // 简历不存在，使用默认值
    console.log('简历不存在，使用默认模板:', error)
  }
}

onMounted(() => {
  loadResume()
})
</script>

<style scoped>
.resume-builder {
  padding: 20px;
}

.resume-card {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.resume-form {
  max-width: none;
}

.resume-sections {
  margin-bottom: 20px;
}

.form-section {
  padding: 20px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  color: #409eff;
}

.experience-item {
  margin-bottom: 16px;
}

.experience-card {
  margin-bottom: 16px;
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-section {
  text-align: center;
}

.current-avatar {
  margin-bottom: 12px;
}

.avatar-options {
  margin-top: 10px;
}

.avatar-radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.avatar-radio {
  height: auto;
}

.avatar-option-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resume-builder {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .avatar-radio-group {
    flex-direction: column;
  }
}
</style>
